<template>
<div class="main_bottom">
    <div class="main_left">
        <!-- v-show="userInfoStore['optPermission'].includes('productionData.realTimeData')" -->
        <div class="menu_item" id="productionData.realTimeData" :style="{background:selectMenu===1?'#F0F3F8':'#fff',color:selectMenu===1?'#116DEE':'#2A2A2A'}" @click="checkMenu(1)">实时数据</div>
        <div class="menu_item" id="productionData.historyData" :style="{background:selectMenu===2?'#F0F3F8':'#fff',color:selectMenu===2?'#116DEE':'#2A2A2A'}" @click="checkMenu(2)">历史数据</div>
        <div class="menu_item" id="productionData.historyBanci" :style="{background:selectMenu===3?'#F0F3F8':'#fff',color:selectMenu===3?'#116DEE':'#2A2A2A'}" @click="checkMenu(3)">历史班次</div>
    </div>
    <div class="main_right">
        <div class="menu_data" v-if="selectMenu===1">
            <div class="data_list" style="flex:3 1 25%">
                <div class="data_top">
                    <div class="data_title">数据</div>
                    <!-- <div class="title_right">
                <div class="tip1">CT/S: {{ nowData.totalData.ct }}</div>
                <div class="tip2">
                  <el-checkbox v-model="checked">显示个模块良率</el-checkbox>
                </div>
              </div> -->
                </div>
                <div class="data_content">
                    <div class="data_item">
                        <div class="item_title">总投产数:</div>
                        <div class="item_val">{{ nowData.totalData.countAll }}</div>
                    </div>
                    <div class="data_item">
                        <div class="item_title">总良品数:</div>
                        <div class="item_val">{{ nowData.totalData.countOk }}</div>
                    </div>
                    <div class="data_item">
                        <div class="item_title">总不良数:</div>
                        <div class="item_val">{{ nowData.totalData.countNg }}</div>
                    </div>
                    <div class="data_item">
                        <div class="item_title">总良率:</div>
                        <div class="item_val">{{ nowData.totalData.rateAll }}%</div>

                    </div>
                    <div class="data_item">
                        <div class="item_title">外观良率:</div>
                        <div class="item_val">{{ nowData.totalData.rateWg }}%</div>

                    </div>
                    <div class="data_item">
                        <div class="item_title">辅料良率:</div>
                        <div class="item_val">{{ nowData.totalData.rateFl }}%</div>

                    </div>
                </div>
            </div>
            <div class="data_list" style="flex:2 1 12%">
                <div class="data_top">
                    <div class="data_title">模块良率</div>
                </div>
                <div class="data_content">
                    <div class="data_item item_width" v-for="item in nowData.totalRate">
                        <div class="item_title">{{ item.label }}: </div>
                        <div class="item_val">{{ item.value }}%</div>
                    </div>
                </div>
            </div>
            <!--          <div class="data_list" style="flex:2;display: flex;flex-direction: column">-->

            <!--              <div class="content_item" style="margin-left: 20px;margin-top: 13px;font-weight: 600;">-->
            <!--                <div class="list_item" >-->
            <!--                  <span class="item_text1">产品名称：</span>-->
            <!--                  <span class="item_text2">{{ nowData.totalData.productName }}</span>-->
            <!--                </div>-->
            <!--                <div class="list_item" style="margin-top: 12px;padding-right: 10px;">-->
            <!--                  <span class="item_text1">生产颜色：</span>-->
            <!--                  <span class="item_text2" style="word-wrap: break-word;">{{ nowData.totalData.color }}</span>-->
            <!--                </div>-->

            <!--            </div>-->
            <!--          </div>-->
            <div class="data_list" style="border-right: none;flex:1">
                <div class="data_btn">
                    <div class="btn_item" style="background-color: #F23541;" @click="clearZero">清零</div>
                </div>
            </div>
        </div>
        <div class="main_table" v-if="selectMenu===1" style="height: calc(100% - 142px);overflow-y: auto;">
            <el-table :data="nowData.samplesData" :header-cell-style="{fontSize: '14px', backgroundColor: '#EBEFF5',color:'#2A2A2A'}" border height="100%" style="width: 100%">
              <el-table-column prop="productName" label="产品名称" width="80">
              </el-table-column>
              <el-table-column prop="color" label="生产颜色" width="80">
              </el-table-column>
              <el-table-column prop="qrcode" label="条码" width="250">
                </el-table-column>
                <el-table-column prop="datetime" label="测试时间" width="150">
                </el-table-column>

                <el-table-column prop="acupoint" label="穴位号" width="60">
                </el-table-column>
                <el-table-column width="40" label="结果">
                    <template slot-scope="scope">
                        <!-- <div class="result_div" :style="{backgroundColor:scope.row.rlt==='OK'?'#3CBA4D':'#F23541'}">{{ scope.row.rlt }}</div> -->
                        <div class="result_div" :style="{color:scope.row.rlt==='OK'?'#3CBA4D':'#F23541'}">
                          {{ scope.row.rlt }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="wg" label="外观缺陷">
                </el-table-column>
                <el-table-column prop="fl" label="辅料缺陷">
                </el-table-column>

            </el-table>
        </div>
        <div class="menu_select" v-if="selectMenu===2" style="display: block;padding-left:24px">
            <el-row>
                <el-form :inline="true">
                    <el-form-item label="开始时间">
                        <el-date-picker   v-selfdbclick  v-model="query.startTime" type="datetime" placeholder="选择开始日期" @change="handleChange">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker   v-selfdbclick  v-model="query.endTime" type="datetime" placeholder="选择结束日期" @change="handleChange">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="产品名称">
                      <!-- <el-input v-model="query.productName"></el-input> -->
                       <el-select v-model="query.productName" @change="handleChange(1)">
                        <el-option v-for="item in productNames" :key="item" :label="item" :value="item"></el-option>
                       </el-select>
                    </el-form-item>
                    <el-form-item label="物料颜色">
                      <!-- <el-input v-model="query.color"></el-input> -->
                      <el-select  v-model="query.color" @change="handleChange(2)">
                        <el-option v-for="item in productColors" :key="item" :label="item" :value="item"></el-option>
                       </el-select>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row style="margin-top: -16px;">
                <el-form :inline="true">
                    <el-form-item label="SN">
                      <el-input v-model="query.qrCode" placeholder="支持逗号分割" style="width: 870px"></el-input>
                      <div class="data_list" style="flex:2;position: absolute; left:890px ;top: 6px">
            <div class="btn_list" style="margin-top: -6px">
              <!-- <div class="btn" @click="doQuery">查询</div>
              <div class="btn_export" style="margin-left: 15px;margin-right: 15px;" @click="exportData" >导出数据</div>
              <div class="btn_export" @click="importData" >导入数据</div> -->
              <el-button type="primary" @click="doQuery">查询</el-button>
              <el-button type="primary" @click="exportData">导出数据</el-button>
              <el-button type="primary" @click="importData">导入数据</el-button>
            </div>

          </div>
                    </el-form-item>

                </el-form>

            </el-row>
            <!-- <div class="data_list">
            <div class="select_item">
              <span class="demonstration">开始时间: </span>
              <el-date-picker   v-selfdbclick
                v-model="query.startTime"
                type="datetime"
                placeholder="选择开始日期">
              </el-date-picker>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">结束时间: </span>
              <el-date-picker   v-selfdbclick
                v-model="query.endTime"
                type="datetime"
                placeholder="选择结束日期">
              </el-date-picker>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">产品名称: </span>
              <el-input v-model="query.productName"></el-input>
            </div>

          </div>
          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">物料颜色: </span>
              <el-input v-model="query.color"></el-input>
            </div>

          </div>

          <div class="data_list">
            <div class="select_item">
              <span class="demonstration">SN: </span>
              <el-input v-model="query.qrCode" placeholder="支持逗号分割"></el-input>
            </div>

          </div>
          <div class="data_list" style="flex:2">
            <div class="btn_list">
              <div class="btn" @click="doQuery">查询</div>
              <div class="btn_export" style="margin-left: 15px;margin-right: 20px;" @click="exportData" >导出数据</div>
            </div>

          </div> -->
        </div>
      <div class="menu_text" v-if="selectMenu===2" style="display: flex; justify-content: space-between; align-items: center;">
        <div>
          <!-- <span class="text_item">总投产数 : {{ historyData.totalCount }}</span>
          <span class="text_item" style="margin-left: 35px;">总良品数 : {{ historyData.countOk }}</span>
          <span class="text_item" style="margin-left: 35px;">总良率 : {{ historyData.rate }}%</span> -->
          <span class="text_item">{{ historyData['str'] }}</span>
        </div>
        <div>
          <el-pagination
              small
              layout="prev, pager, next"
              :total="historyData.totalCount"
              style="margin-top: 15px;"
              :current-page="currentPage"
              :page-size="pageSize"
              @current-change="handlePageChange"
          >
          </el-pagination>
        </div>
      </div>

      <div class="main_table" v-if="selectMenu===2" style="height: calc(100% - 132px);overflow-y: auto;">
            <el-table :data="historyData.samplesData" :header-cell-style="{fontSize: '14px', backgroundColor: '#EBEFF5',color:'#2A2A2A'}" border height="100%" style="width: 100%" @cell-click="copyText" >
              <el-table-column prop="productName" label="产品名称" width="80">
              </el-table-column>
              <el-table-column prop="color" label="生产颜色" width="80">
              </el-table-column>
              <el-table-column prop="qrcode" label="条码" width="250">
                </el-table-column>
                <el-table-column prop="datetime" label="测试时间" width="150">
                </el-table-column>

                <el-table-column prop="acupoint" label="穴位号" width="60">
                </el-table-column>
                <el-table-column width="40" label="结果">
                    <template slot-scope="scope">
                        <div class="result_div" :style="{color:scope.row.rlt==='OK'?'#3CBA4D':'#F23541'}">
                          {{ scope.row.rlt }}
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="wg" label="外观缺陷">
                </el-table-column>
                <el-table-column prop="fl" label="辅料缺陷">
                </el-table-column>

            </el-table>
        </div>
        <div v-if="selectMenu===3">
          <div style="background-color: #FFFFFF;border-bottom: 2px solid #ECEEF1;padding-left: 20px;padding-top: 20px;">
            <el-form :inline="true">
                <el-form-item label="开始时间">
                        <el-date-picker   v-selfdbclick  v-model="searchBanciForm.startTime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" placeholder="选择开始日期" @change="handleChange">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker   v-selfdbclick  v-model="searchBanciForm.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择结束日期" @change="handleChange">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchBanci">查询</el-button>
                    </el-form-item>
                    <el-form-item label="快捷查询">
                        <el-button type="primary" @click="searchBanci(0)">昨天全天</el-button>
                        <el-button type="primary" @click="searchBanci(1)"> 昨天白班</el-button>
                        <el-button type="primary" @click="searchBanci(2)"> 昨天夜班</el-button>
                        <el-button type="primary" @click="searchBanci(3)"> 今天全天</el-button>
                        <el-button type="primary" @click="searchBanci(4)"> 今天白班</el-button>
                        <el-button type="primary" @click="searchBanci(5)"> 今天夜班</el-button>
                    </el-form-item>
            </el-form>
          </div>
          <div class="content_item">
            <el-row style="width:1400px;padding-left: 20px;">
                <el-col :span="4">
                    <div class="list_item" style="width: 220px;margin-top: 10px;">
                    <span class="item_text1">总投产数：</span>
                    <span class="item_text2">{{ totalData.countAll }}</span>
                    </div>
                    
                </el-col>
                <el-col :span="4">
                    
                    <div class="list_item" style="width: 220px;margin-top: 10px;">
                    <span class="item_text1">外观良率：</span>
                    <span class="item_text2">{{ totalData.rateWg }}%</span>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="list_item" style="width: 220px;margin-top: 10px;">
                    <span class="item_text1">总良品数：</span>
                    <span class="item_text2">{{ totalData.countOk }}</span>
                    </div>
                    
                </el-col>
                <el-col :span="4">
                    <div class="list_item" style="width: 220px;margin-top: 10px;">
                    <span class="item_text1">辅料良率:</span>
                    <span class="item_text2">{{ totalData.rateFl }}</span>
                    </div>
                    
                </el-col>
                <el-col :span="4">
                    <div class="list_item" style="width: 220px;margin-top: 10px;">
                    <span class="item_text1">良率:</span>
                    <span class="item_text2">{{ totalData.rateAll }}</span>
                    </div>
                    
                </el-col>
                
            </el-row>
            <el-row>
                <div class="bottom_table">
          <div class="table_list">
            <div class="table_title">
              <div class="title_item" v-for="item in tableModels" :style="{width:100/(tableModels.length)+'%'}">
                {{ item.label }}
              </div>
              <!-- <div class="title_item" >
                8:00
              </div> -->
            </div>
            <div class="table_content">
              <div class="table_item">
                <div class="item_main">投入</div>
                <div class="item_main">良品</div>
                <div class="item_main">良率</div>
              </div>
              <div class="table_item" v-for="item in teamProductDatas">
                <div class="item_main" style="text-align: center;">{{ item.all }}</div>
                <div class="item_main" style="text-align: center;">{{ item.good }}</div>
                <div class="item_main" style="text-align: center;">{{ item.yield}}%</div>
              </div>
            </div>
          </div>

          <!-- <el-table
stripe
:data="table.tableData"
highlight-current-row
border
style="width: 100%" height="100%"
:header-cell-style="{fontSize: '14px', backgroundColor: '#DBDFE5',color:'#2A2A2A'}">
>
<el-table-column
  v-for="tableModel in table.tableModels"
  :key="tableModel.key"
  :prop="tableModel.key"
  :label="tableModel.label"
  :width="tableModel.width"
>
  <template #default="{ row }">
    <span>
      {{ row[tableModel.key] }}
    </span>
  </template>
</el-table-column>
</el-table> -->

        </div>
            </el-row>

          </div>
        </div>
    </div>
    <!-- <component :is="tabKey" class="tab-class" /> -->

</div>
</template>

<script>
import qwebchannel from '../../qt5.15webchannel.js';
import { Message } from 'element-ui';
import { mapState } from 'vuex';
import { validPermision } from '../../utils/tools.js';

export default {
    computed: {
        ...mapState(['userStoreLimits', 'userInfoStore']),
    },
    name: 'BoneDen',
    data() {
        return {
            tableModels:[],
            teamProductDatas:[
            {
                "label": "01:00",	//时间
                "all": "100",	//投入总数
                "good": "60",		//良品数
                "yield": "60"		//良率
            }
            ],
            totalData:{
                countAll:0,
                rateWg:0,
                countOk:0,
                rateAll:0,
                rateFl:0
            },
          productNames:[],
          productColors: [],
            selectMenu: 1,
            checked: false,
            qtCall: null,
            query: {
                startTime: "",
                endTime: "",
                color: "全部",
                productName: "全部",
                qrCode: "",
                page: 1,
                pageSize: this.pageSize
            },
            nowData: {
                totalData: { //数据
                    dt: 0, //dt时间
                    ct: 0, //ct时间
                    countAll: 0, //总数
                    countOk: 0, //ok数
                    countNg: 0, //ng数
                    rateAll: 0, //总良率
                    rateWg: 0, //外观良率
                    rateFl: 0 //辅料良率
                },
                totalRate: [
                    // {
                    //   label:'模块1',
                    //   value:10
                    // },
                    // {
                    //   label:'模块2',
                    //   value:20
                    // },
                    // {
                    //   label:'模块3',
                    //   value:30
                    // },
                    // {
                    //   label:'模块4',
                    //   value:40
                    // }
                ],
                samplesData: [] //实时样本数据
            },
            historyData: {
                totalCount: 0,
                rate: 0,
                countOk: 0,
                totalData: { //数据
                    dt: 0, //dt时间
                    ct: 0, //ct时间
                    countAll: 0, //总数
                    countOk: 0, //ok数
                    countNg: 0, //ng数
                    rateAll: 0, //总良率
                    rateWg: 0, //外观良率
                    rateFl: 0, //辅料良率

                },
                totalRate: { //总良率
                    acupoint1: 0, //工位1良率
                    acupoint2: 0, //工位2良率
                    acupoint3: 0 //工位3良率
                },
                samplesData: [ //实时样本数据
                    // {
                    //     qrcode: "02353CCB++82402061A4001553320242181190450",//条码
                    //     datetime: "2024-06-18 12:00:00",//测试时间
                    //     acupoint: "1",//穴位号，界面已移除？
                    //     rlt: "OK",//结果
                    //     wg: "压伤",//外观缺陷
                    //     fl: "背胶膜缺失",	//辅料缺陷
                    //     number: "11",	//数量
                    //     rate: "23"	//数量
                    // },
                    // {
                    //     qrcode: "02353CCB++82402061A4001553320242181190450",
                    //     datetime: "2024-06-18 12:00:00",
                    //     acupoint: "1",
                    //     rlt: "NG",//结果
                    //     wg: "压伤",//外观缺陷
                    //     fl: "背胶膜缺失"	//辅料缺陷
                    // }
                ]
            },
          currentPage: 1,
          pageSize: 50,
          changeSearch: false,
          productNameAndColor: {},
          allColor: [],
          searchBanciForm:{startTime:'',endTime:'',fastQuery:0}
        }
    },
    created() {

    },
    mounted() {
    //   setInterval(() => {
    //       try {
    //         console.log('heart-test','heart')
    //         this.qtCall.JsToQt("HeartTest", {})//NeedRefreshRealData
    //       } catch (error) {
    //         console.log('HeartTest',error)
    //       }
    //     }, 5000);
        validPermision(this.selectMenu)
        if(process.env.NODE_ENV != 'production'){
          this.historyData.samplesData.push({
                        qrcode: "02353CCB++82402061A4001553320242181190450",//条码
                        datetime: "2024-06-18 12:00:00",//测试时间
                        acupoint: "1",//穴位号，界面已移除？
                        rlt: "OK",//结果
                        wg: "压伤",//外观缺陷
                        fl: "背胶膜缺失",	//辅料缺陷
                        number: "11",	//数量
                        rate: "23"	//数量
                    })
        }

        if (process.env.NODE_ENV === 'production') {
            // new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
                // this.qtCall = channel.objects.webBridge;
                this.qtCall = this.$qtCall
                this.qtCall.JsToQt("NeedRefreshRealData", ''); //可以传给qt

                this.qtCall.QtToJs.connect((func, json) => {
                    if(func=='HistoryInTeamProductData'){
                        const datas = JSON.parse(json)
                        console.log('HistoryInTeamProductData返回',datas)
                        if (datas.code === 200) {
                            this.tableModels = [{
                                label: '',
                                key: '',
                                align: '',
                                headerAlign: '',
                            }]
                            this.teamProductDatas = datas.data.teamProductDatas
                            for (var i = 0; i < this.teamProductDatas.length; i++) {
                                const modelItem = {
                                label: '',
                                key: '',
                                align: '',
                                headerAlign: '',
                                }
                                modelItem.label = this.teamProductDatas[i].label
                                modelItem.key = this.teamProductDatas[i].label
                                modelItem.align = 'center'
                                modelItem.headerAlign = 'headerAlign'

                                this.tableModels.push(modelItem)
                            }
                        }
                        
                    }
                    if (func == "RefreshRealData") {
                        const datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log("mounted 里获取实时数据： ", datas.data)
                            this.nowData = datas.data
                            console.log(this.nowData)
                        }
                    }
                    if (func == "setSomeDefaultData") {
                        const datas = JSON.parse(json)
                        if (datas.code === 200) {
                          console.log("mounted 里使用 setSomeDefaultData 接口读取到的数据： ", datas.data)
                          this.productColors = datas.data.productColor.split(',')
                          this.productNames = datas.data.productNames.map(item => item.label);
                          this.productNameAndColor = datas.data.productNames.reduce((acc, item) => {
                            acc[item.label] = item.value;
                            return acc;
                          }, {});
                          this.allColor = this.productColors;
                            this.query.productName = this.productNames[0]
                            this.query.color = this.productColors[0]
                            this.query.startTime = datas.data.startTime
                            this.query.endTime = datas.data.endTime

                        }
                    }
                    if (func === "getSNValue") {
                      const datas = JSON.parse(json)
                      if (datas.code === 200) {
                        console.log("mounted 里使用 getSNValue 接口读取到的数据（SN 的内容）： ", datas.data)
                        this.query.qrCode = datas.data
                      }
                    }
                })
                this.qtCall.JsToQt("NeedSetSomeDefaultData", {});
            // });
        }
    },
    beforeDestroy() {
        // this.qtCall = null
    },
    watch: {
        selectMenu(val) {
            if (val === 1) {
                if (process.env.NODE_ENV === 'production') {
                    this.qtCall.QtToJs.connect((func, json) => {
                        if (func == "RefreshRealData") {
                            const datas = JSON.parse(json)
                            if (datas.code === 200) {
                              console.log("watch 里获取实时数据： ", datas.data)
                              this.nowData = datas.data
                            }
                        }
                    })
                }
            } else {
                if (process.env.NODE_ENV === 'production') {
                    this.query.page = this.currentPage
                    this.query.pageSize = this.pageSize
                    this.qtCall.JsToQt("NeedQueryHistoryInProductData", this.query); //可以传给qt
                    this.qtCall.QtToJs.connect((func, json) => {
                        if (func == "RefreshHistoryInProductData") {
                            const datas = JSON.parse(json)
                            if (datas.code === 200) {
                              console.log("watch 里获取历史数据： ", datas.data)
                              this.historyData = datas.data;
                            }
                        }
                    })
                }
            }
        }
    },
    methods: {
        
        searchBanci(val){
            if(val){
                this.searchBanciForm.fastQuery = val
            }
            console.log('NeedQueryHistoryInTeamProductData传参',this.searchBanciForm)
            if (process.env.NODE_ENV === 'production') {
                
                this.qtCall.JsToQt("NeedQueryHistoryInTeamProductData", {...this.searchBanciForm});
            }else{
                
            }
            
        },
        exportData() {
            if (process.env.NODE_ENV === 'production') {
                const data = {
                    type: 1,
                    startTime: this.query.startTime,
                    endTime: this.query.endTime,
                    color: this.query.color,
                    productName: this.query.productName,
                    productOrDefect: this.query.productOrDefect,
                    qrCode: this.query.qrCode

                }
                this.qtCall.JsToQt("NeedExport", data); //可以传给qt
            }
        },
      importData(){
        if (process.env.NODE_ENV === 'production') {
          this.qtCall.JsToQt("NeedImport", {type: 1}); //可以传给qt
        }
      },
        checkMenu(index) {
            this.selectMenu = index
        },
        doQuery() {
            this.search()
        },
        clearZero() {
            if (process.env.NODE_ENV === 'production') {
                this.qtCall.JsToQt("ClearRealDataInProductData", ''); //可以传给qt
                this.nowData = {
                    totalData: { //数据
                        dt: 0, //dt时间
                        ct: 0, //ct时间
                        countAll: 0, //总数
                        countOk: 0, //ok数
                        countNg: 0, //ng数
                        rateAll: 0, //总良率
                        rateWg: 0, //外观良率
                        rateFl: 0 //辅料良率
                    },
                    totalRate: { //总良率
                        acupoint1: 0, //工位1良率
                        acupoint2: 0, //工位2良率
                        acupoint3: 0 //工位3良率
                    },
                    samplesData: [ //样本数据

                    ]
                }
                this.qtCall.QtToJs.connect((func, json) => {
                    if (func == "RefreshRealData") {
                        const datas = JSON.parse(json)
                        if (datas.code === 200) {
                          console.log("clearZero 清零时获取实时数据： ", datas.data)
                          this.nowData = datas.data
                        }
                    }
                })
            } else {
                this.nowData = {
                    totalData: { //数据
                        dt: 0, //dt时间
                        ct: 0, //ct时间
                        countAll: 0, //总数
                        countOk: 0, //ok数
                        countNg: 0, //ng数
                        rateAll: 0, //总良率
                        rateWg: 0, //外观良率
                        rateFl: 0 //辅料良率
                    },
                    totalRate: [
                      {
                        "label": "acupoint1",
                        "value": 0
                      },
                      {
                        "label": "acupoint2",
                        "value": 0
                      },
                      {
                        "label": "acupoint3",
                        "value": 0
                      },
                    ],
                    samplesData: [ //实时样本数据

                    ]
                }
            }
        },
        handleInput(value) {
            const splitValues = value.split(/[,，;；]/).filter(val => val.trim() !== '');
            return splitValues;
        },
        search() {
            if (!this.query.startTime) {
                Message.warning('请选择开始时间')
                return
            }
            if (!this.query.endTime) {
                Message.warning('请选择结束时间')
                return
            }
            if (new Date(this.query.startTime).getTime() > new Date(this.query.endTime).getTime()) {
                Message.warning('开始时间不能大于结束时间')
                return
            }
            // color 支持多输入 使用“，” 分割
            this.query.qrCode = this.handleInput(this.query.qrCode).join(',');

            if (this.query.startTime && this.query.endTime) {
                let yy = new Date(this.query.startTime).getFullYear().toString();
                let mm = new Date(this.query.startTime).getMonth() + 1;
                let dd = new Date(this.query.startTime).getDate();
                let hh = new Date(this.query.startTime).getHours();
                let mf = new Date(this.query.startTime).getMinutes();
                let ss = new Date(this.query.startTime).getSeconds();
                mm = mm < 10 ? '0' + mm.toString() : mm.toString()
                dd = dd < 10 ? '0' + dd.toString() : dd.toString()
                hh = hh < 10 ? '0' + hh.toString() : hh.toString()
                mf = mf < 10 ? '0' + mf.toString() : mf.toString()
                ss = ss < 10 ? '0' + ss.toString() : ss.toString()

                let yy1 = new Date(this.query.endTime).getFullYear().toString();
                let mm1 = new Date(this.query.endTime).getMonth() + 1;
                let dd1 = new Date(this.query.endTime).getDate();
                let hh1 = new Date(this.query.endTime).getHours();
                let mf1 = new Date(this.query.endTime).getMinutes();
                let ss1 = new Date(this.query.endTime).getSeconds();
                mm1 = mm1 < 10 ? '0' + mm1.toString() : mm1.toString()
                dd1 = dd1 < 10 ? '0' + dd1.toString() : dd1.toString()
                hh1 = hh1 < 10 ? '0' + hh1.toString() : hh1.toString()
                mf1 = mf1 < 10 ? '0' + mf1.toString() : mf1.toString()
                ss1 = ss1 < 10 ? '0' + ss1.toString() : ss1.toString()
                this.query.startTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
                this.query.endTime = yy1 + '-' + mm1 + '-' + dd1 + ' ' + hh1 + ':' + mf1 + ':' + ss1
            }
            if (this.changeSearch) {
                this.currentPage = 1
                this.changeSearch = false
            }
            this.query.page = this.currentPage
            this.query.pageSize = this.pageSize

            if (process.env.NODE_ENV === 'production') {
                this.qtCall.JsToQt("NeedQueryHistoryInProductData", this.query); //可以传给qt
                this.qtCall.QtToJs.connect((func, json) => {
                    if (func == "RefreshHistoryInProductData") {
                        const datas = JSON.parse(json)
                        if (datas.code === 200) {
                          console.log("search 里获取历史数据： ", datas.data)
                          this.historyData = datas.data
                        }
                    }
                })
            }
        },
      handlePageChange(page) {
        // 更新当前页码
        if (page === 0)[
            page = 1
        ]
        this.currentPage = page;
        this.search();
      },
      handleChange (index, product_name) {
        this.changeSearch = true
        if (index === 1) {
          if (this.query.productName === "全部") {
            this.productColors = this.allColor
            this.query.color = '全部'
          } else {
            this.productColors = [this.productNameAndColor[this.query.productName]]
            this.query.color = this.productNameAndColor[this.query.productName]
          }
        }
      },
    },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
.result_div {
    width: 100%;
    text-align: left;
    height: 100%;
    line-height: 40px;
    color: #2A2A2A;
    padding-left: 0px;
    text-indent: -5px;
}

.main_bottom {
    display: flex;
    flex: 1;
    flex-direction: row;
    background-color: #fff;

    border-bottom: 3px solid #ECEEF1;
    height: calc(100% - 90px);

    .main_left {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 180px;
        border-right: 3px solid #ECEEF1;

        .menu_item {
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            font-weight: 600;
            border-bottom: 1px solid #ECEEF1;
            cursor: pointer;
        }
    }

    .main_right {
        flex: 1;

        .menu_text {
            width: 100%;
            display: flex;
            flex-direction: row;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #2A2A2A;
            background-color: #fff;

            .text_item {
                margin-left: 20px;
            }
        }

        .menu_select {
            .data_list {
                flex: 2;
                display: flex;
                flex-direction: column;

                .btn_list {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;

                    .btn {
                        width: 110px;
                        height: 26px;
                        background: #DBDFE5;
                        border-radius: 3px;
                        text-align: center;
                        line-height: 26px;
                        font-size: 12px;
                        color: #2A2A2A;
                        border: 2px solid #DBDFE5;
                        cursor: pointer;
                    }

                    .btn_export {
                        width: 110px;
                        height: 26px;
                        background: #fff;
                        border-radius: 3px;
                        text-align: center;
                        line-height: 26px;
                        font-size: 12px;
                        color: #2A2A2A;
                        border: 2px solid #DBDFE5;
                        cursor: pointer;
                        background-image: url('../../assets/ic_date_export.png');
                        background-repeat: no-repeat;
                        background-size: 13px 16px;
                        background-position: 10px 5px;
                        padding-left: 5px;

                    }
                }

                .select_item {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    margin-left: 20px;

                    /deep/ .el-date-editor.el-input,
                    .el-date-editor.el-input__inner {
                        width: 180px;
                        margin-left: 10px;
                        height: 40px;
                    }

                    /deep/ .el-input--suffix .el-input__inner {
                        height: 40px;
                    }
                }

                /deep/ .el-input__icon {
                    line-height: 40px;
                }

                /deep/ .el-input {
                    width: 180px;
                    margin-left: 10px;
                    height: 40px;
                }

                /deep/ .el-input__inner {
                    line-height: 40px;
                    height: 40px;
                }
            }
        }

        .main_table {
            margin: 1px;

            /deep/ .el-table .el-table__cell {
                padding: 0px;
                height: 40px;
            }

            /deep/ .el-table .cell {
                padding: 0px;
                box-sizing: border-box;
                padding-left: 10px;
            }

            /deep/ .el-table--border {
                overflow-y: auto;
                height: 100%;
            }

            .el-table::before {
                display: none !important;
            }
        }

        .menu_select {
            background-color: #fff;
            border-bottom: 2px solid #ECEEF1;
            display: flex;
            height: 90px;
        }

        .menu_data {
            background-color: #fff;
            border-bottom: 2px solid #ECEEF1;
            display: flex;
            height: 140px;

            .data_list {
                flex: 1;
                display: flex;
                border-right: 2px solid #ECEEF1;
                flex-direction: column;

                .data_btn {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    height: 100%;
                    color: #fff;
                    text-align: center;
                    line-height: 32px;
                    font-size: 14px;

                    .btn_item {
                        width: 100px;
                        height: 32px;
                        border-radius: 3px;
                        margin-left: 20px;
                        cursor: pointer;
                    }
                }

                .data_content {
                    display: flex;
                    flex-direction: row;
                    margin: 0 20px;
                    flex-wrap: wrap;

                    .data_item {
                        width: calc(100% / 3);
                        font-size: 14px;
                        display: flex;
                        margin-top: 15px;

                        .item_title {
                            width: 70px;
                            height: 28px;
                            line-height: 28px;
                            text-align: left;
                            color: #2A2A2A;
                            padding-right: 20px;
                        }

                        .item_val {
                            width: 160px;
                            height: 28px;
                            background: #DBDFE5;
                            border-radius: 2px;
                            padding-left: 20px;
                            line-height: 28px;
                        }
                    }

                    .item_width {
                        width: calc(100% / 2);

                        .item_title {
                            padding-right: 10px;
                        }

                        .item_val {
                            width: 130px;
                        }
                    }
                }

                .data_top {
                    display: flex;
                    height: 40px;
                    line-height: 50px;
                    flex-direction: row;
                    width: 100%;

                    .title_right {
                        flex: 3;
                        display: flex;
                        font-size: 14px;
                        color: #2A2A2A;

                        .tip1 {
                            flex: 1;
                            text-align: right;
                            padding-right: 35px;
                        }

                        .tip2 {
                            flex: 1;
                            font-weight: 600;
                            margin-right: 20px;
                        }
                    }

                    .data_title {
                        flex: 4;
                        font-weight: 600;
                        font-size: 16px;
                        color: #2A2A2A;
                        padding-left: 20px;
                    }
                }
            }
        }
    }

}

.pagination-container {
  text-align: right; /* 让分页组件居右显示 */
}

.pagination-container .el-pagination {
  display: inline-block; /* 确保分页组件被视为行内元素，以便 text-align 生效 */
}
.list_item {
            height: 90px;
            width: 300px;
            background: #E9F1FB;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .item_text1 {
              font-weight: 600;
              font-size: 18px;
              color: #2A2A2A;
              padding-left: 30px;
            }

            .item_text2 {
              font-weight: 600;
              font-size: 18px;
              color: #116DEE;
              padding-top: 10px;
              padding-left: 30px;
            }
          }
          .bottom_table {

flex: 1;
display: flex;

margin: 20px 20px 20px 20px;

.table_list {
  display: flex;
  width: 100%;
  max-height: 250px;
  min-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  flex-direction: column;
  border-left: 1px solid #F0F3F8;
  border-right: 1px solid #F0F3F8;

  .table_content {
    display: flex;
    border-left: 1px solid #F0F3F8;
    border-right: 1px solid #F0F3F8;
    height: 120px;

    .table_item {
      display: flex;
      flex-direction: column;
      flex: 1;

      .item_main {
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding-left: 20px;
        font-weight: 600;
        font-size: 14px;
        color: #2A2A2A;
        border-bottom: 1px solid #F0F3F8;
      }
    }
  }

  .table_title {
    flex: 1;

    background-color: #EBEFF5;
    text-align: left;
    line-height: 40px;
    height: 40px;
    font-weight: 600;
    font-size: 14px;
    color: #2A2A2A;
    height: 50px;
    display: block;
    float: left;

    .title_item {
      flex: 1;
      text-align: center;
      box-sizing: border-box;
      text-indent: 15px;
      // padding-left: 20px;
      width: 33.2%;
      float: left;
      height: 40px;
    }
  }
}


}
</style>
